<template>
  <div>
    {{ defaultTab }}
    {{ editableTabs }}
    <KunkkaTabsList
      :addButton="addButton"
      :closable="false"
      :editable="false"
      :defaultTab="defaultTab" 
      :editableTabs="editableTabs"
      type="border-card"
      @addTab="addTab"
      @removeTab="removeTab"
      @toggleClick="toggleClick"
      @tabClick="tabClick"
      @searchClick="searchClick">
      <template v-slot:action>
        <ux-table-column
          v-if="defaultTab != 3"
          fixed="right"
          title="操作"
          width="150">
          <template v-slot="{row, column}">
            <el-button @click="hhh(row, column)">
              操作
            </el-button>
          </template>
        </ux-table-column>
      </template>
    </KunkkaTabsList>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'KunkkaTabsList',
      addButton: 'addButton',
      defaultTab: '1',
      editableTabs: [
        {
          label: '标签页1',
          name: '1',
          columns: [
            {
              label: '工号',
              prop: 'id',
              type: 'input',
              show: true,
              disabled: true
            },
            {
              label: '姓名',
              prop: 'name',
              type: 'inputSearch',
              show: true
            },
            {
              label: '无校验',
              prop: 'flag',
              type: 'input',
              show: true
            }
          ],
          data: [],
          handle: [
            {
              label: '导入',
              type: 'upload',
              show: true
            }
          ],
          // rules: {
          //   id: [{ required: true, message: '请填写工号', trigger: 'blur' }],
          //   name: [{ required: true, message: '请填写姓名', trigger: 'change' }],
          //   type: [{ required: true, message: '请选择类型', trigger: 'change' }],
          //   value: [{ required: true, message: '请填写值', trigger: 'change' }]
          // }
        },
        {
          label: '标签页2',
          name: '2',
          data: [
            {
              id: '001',
              name: '张三',
              type: 'lx1'
            },
            {
              id: '002',
              name: '李四',
              type: 'lx2'
            }
          ],
          columns: [
            {
              label: '工号',
              prop: 'id',
              type: 'input',
              show: true
            },
            {
              label: '姓名',
              prop: 'name',
              type: 'inputSearch',
              show: true
            },
            {
              label: '类型',
              prop: 'type',
              type: 'select',
              optionlist: [
                {
                  cKeyname: '类型1',
                  cKeynumb: 'lx1'
                },
                {
                  cKeyname: '类型2',
                  cKeynumb: 'lx2'
                }
              ],
              show: true
            },
            {
              label: '无校验',
              prop: 'flag',
              type: 'input',
              show: true
            }
          ],
          handle: [
            {
              label: '导入',
              type: 'upload',
              show: true
            }
          ]
        },
        {
          label: '标签页3',
          name: '3',
          data: []
        }
      ]
    };
  },
  mounted() {
  },
  methods: {
    addTab(value) {
      let newTabName = this.editableTabs.length + 1 + '';
      this.editableTabs.push({
        label: value,
        name: newTabName
      });
      this.defaultTab = newTabName;
    },
    removeTab(value) {
      let tabs = this.editableTabs;
      let activeName = this.defaultTab;
      if (activeName === value) {
        tabs.forEach((tab, index) => {
          if (tab.name === value) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.defaultTab = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== value);  
    },
    hhh(row, column) {
      console.log(row, column)
    },
    // 按钮点击回调
    toggleClick(data, activeTab) {
      console.log(data, `当前激活标签索引：${activeTab}`)
    },
    // 标签点击回调
    tabClick(data) {
      this.defaultTab = data.name
      console.log(data)
    },
    // 放大镜点击回调
    searchClick(data) {
      console.log('放大镜点击回调', data)
    }
  }
};
</script>
<style lang="scss">

</style>
